<template>
  <Card style="width: 350px">
    <p slot="title">
      <Icon type="ios-film-outline"></Icon>
      Classic film
    </p>
    <a href="#" slot="extra" @click.prevent="changeLimit">
      <Icon type="ios-loop-strong"></Icon>
      Change
    </a>
    <ul>
      <li v-for="item in randomMovieList">
        <a :href="item.url" target="_blank">{{ item.name }}</a>
        <span>
          <Icon type="ios-star" v-for="n in 4" :key="n"></Icon
          ><Icon type="ios-star" v-if="item.rate >= 9.5"></Icon
          ><Icon type="ios-star-half" v-else></Icon>
          {{ item.rate }}
        </span>
      </li>
    </ul>
  </Card>
</template>
<script>
export default {
  data() {
    return {
      movieList: [
        {
          name: 'The Shawshank Redemption',
          url: 'https://movie.douban.com/subject/1292052/',
          rate: 9.6,
        },
        {
          name: 'Leon:The Professional',
          url: 'https://movie.douban.com/subject/1295644/',
          rate: 9.4,
        },
        {
          name: 'Farewell to My Concubine',
          url: 'https://movie.douban.com/subject/1291546/',
          rate: 9.5,
        },
        {
          name: 'Forrest Gump',
          url: 'https://movie.douban.com/subject/1292720/',
          rate: 9.4,
        },
        {
          name: 'Life Is Beautiful',
          url: 'https://movie.douban.com/subject/1292063/',
          rate: 9.5,
        },
        {
          name: 'Spirited Away',
          url: 'https://movie.douban.com/subject/1291561/',
          rate: 9.2,
        },
        {
          name: "Schindler's List",
          url: 'https://movie.douban.com/subject/1295124/',
          rate: 9.4,
        },
        {
          name: 'The Legend of 1900',
          url: 'https://movie.douban.com/subject/1292001/',
          rate: 9.2,
        },
        {
          name: 'WALL·E',
          url: 'https://movie.douban.com/subject/2131459/',
          rate: 9.3,
        },
        {
          name: 'Inception',
          url: 'https://movie.douban.com/subject/3541415/',
          rate: 9.2,
        },
      ],
      randomMovieList: [],
    };
  },
  methods: {
    changeLimit() {
      function getArrayItems(arr, num) {
        const temp_array = [];
        for (let index in arr) {
          temp_array.push(arr[index]);
        }
        const return_array = [];
        for (let i = 0; i < num; i++) {
          if (temp_array.length > 0) {
            const arrIndex = Math.floor(Math.random() * temp_array.length);
            return_array[i] = temp_array[arrIndex];
            temp_array.splice(arrIndex, 1);
          } else {
            break;
          }
        }
        return return_array;
      }
      this.randomMovieList = getArrayItems(this.movieList, 5);
    },
  },
  mounted() {
    this.changeLimit();
  },
};
</script>
